How to Create a Simple Custom WordPress Theme – Part 1

When you’re starting developing with WordPress, you might find yourself browsing through so many tutorials. Since there are a lot of tutorials, you’re starting to learn advanced topic before you understand the basics. In this tutorial, you will learn how to create a simple custom WordPress theme.

I won’t show the CSS in this post, so you can easily copy the entire CSS for the style.css here. If you want, you can just watch each video and see how I have implemented everything & also written the CSS from scratch (some of it).

Starting the Custom WordPress Theme

When starting a theme, you need to go into wp-content/themes and create your theme folder. When you’re done with that, you also need to create two mandatory files index.php and style.css.

Inside the style.css you only need the Theme Name so WordPress can find your theme and list it so you can also activate it.

Your First index.php

So, what goes inside the index.php? Just think of everything you would put in a simple HTML file when starting a website. You can do that also there but be sure to include functions wp_head() and wp_footer().

Displaying Posts inside the Index.php

For displaying posts you will need to use The Loop. That is the most important thing when you’re developing a custom WordPress theme since that is how you will show the content.

To display the content of each post you will have to use Template Tags. Here is a simple way on how to use the template tag the_title() for displaying the title of each post.

CSS First Steps & Adding it to our Custom WordPress Theme

If you have copied the completed style.css, you might have noticed that even if we have some styles in the style.css, we don’t see that on our site. That is because that style was not added in our site.

We won’t hard code it inside our template but instead, we will use the function wp_enqueue_style() to add it in our theme. When we use that function, we are telling WordPress to add that style in our <head/>. How will WordPress know that? That is done inside the function wp_head().

We are adding such functionalities inside the file functions.php so, go ahead and create one. For adding functions such as wp_enqueue_script() and wp_enqueue_style(), we need to hook a function that will contain those inside the hook wp_enqueue_scripts.

Theme Functions

With the file functions.php we can do a lot more than just registering the styles or scripts. One of the first steps when creating Theme functions is to set up the theme and register menu locations and other similar things. That is done by hooking a function on the action after_setup_theme.

We can add other languages to translate our strings inside the theme by using the function load_theme_textdomain. To add various features that our theme will support, we can use add_theme_support.

Registering various menu locations can be done by using the function register_nav_menus where we pass the location as the key in the array and the name of the menu as the value.

We should also set the maximum width of the content so that the user of our theme, when editing content, can see approximately how the content will be laid out.

Title & HTML5 Support

With the current setup, the browser won’t be able to show the title of the page. We can also add various HTML5 supports so some of the WordPress core templates will be rendered in HTML5 markup.

Add this next lines of code inside the function st_setup:

Separating Header & Footer

We will have to use more than just one file index.php. When creating such templates, we don’t want to copy and paste footer and header code for each template. What if the header changes? We would need to copy and paste it again.

We can help ourselves by separating the header and the footer into separate templates header.php and footer.php.

Header

Footer

Index

Now we need to include that header and footer in our templates. Our first template is index.php. To include them we are using the functions get_header() and get_footer().

Conclusion

This is not a finished theme yet. In the next tutorial regarding our custom WordPress theme, we will create everything else. In this tutorial we have learned just the basics. Now we need to learn how to display each post with much more content.

Have you ever created a custom WordPress theme? What were the things you like or hate about it? Please share in the comments below.

Become a Sponsor